<template>
  <!-- 分类列表数据 -->
  <div class="serachList">
    <div class="searchContainer">
      <dl v-for="item in newCourseCategoryList" :key="item.name" class="listItem">
        <dt class="searchClassify">{{ item.label }}：</dt>
        <dd class="classifyData">
          <div v-for="item2 in item.choises" :key="item2.id" class="itemclassify">{{ item2.name }}</div>
        </dd>
      </dl>
    </div>
    <div v-show="courseCategoryList.length>2">
      <div v-if="!isShowMore"
           class="openSearch"
           @click="isShowMore = true">
        展开全部
      </div>
      <div v-else class="openSearch" @click="isShowMore = false">收起</div>
    </div>
  </div>
</template>

<script lang="ts">
  import {defineComponent} from "vue";

  export default defineComponent({
    name: "CourseCategory"
  });
</script>

<script lang="ts" setup>
  import {defineProps, ref, computed} from "vue";
  import {courseCategoryType} from "@/api/courseAPI/videoCourseAPI";

  interface PropsData {
    courseCategoryList: courseCategoryType[];
  }

  const props = defineProps<PropsData>();

  const isShowMore = ref(false);
  const newCourseCategoryList = computed(() => {
    return isShowMore.value ? props.courseCategoryList : props.courseCategoryList.slice(0, 2);
  });

</script>

<style lang="less">
  .serachList {
    min-height: 190px;
    background: #fff;
    border-radius: 5px;
    padding: 26px 30px;

    .searchContainer {
      min-height: 150px;
      //每一行
      .listItem {
        display: flex;
        padding-bottom: 10px;

        //分类类名
        .searchClassify {
          color: #b1b5c1;
          width: 110px;
          font-weight: 400;
          font-size: 14px;
          text-align: left;
          flex-shrink: 0;
          padding: 7px 0;
        }

        .classifyData {
          display: flex;
          /* justify-content: center; */
          flex-wrap: wrap;

          .searchAvtive {
            color: #fff !important;
            background: #f93684;
            width: 80px;
            border-radius: 5px;
          }

          .itemclassify {
            color: #7d8090;
            /* margin-right: 50px; */
            font-size: 14px;
            padding: 7px 0px;
            margin: 0px 50px 10px 0;
            font-weight: 400;
            text-align: center;
          }
        }
      }
    }
  }

  .openSearch {
    text-align: center;
    color: #f93684;
    font-size: 14px;
    font-weight: 400;
    height: 40px;
    line-height: 40px;
    cursor: pointer;
  }
</style>